Email Validation Using Email Validator Package in Flutter

#Email Validation Using Email Validator Package in Flutter | 来源: 网络整理| 查看: 265

ImplementationCreate a new Flutter project.

2. Add the Email validator package in the pubspec.yaml. Also add fluttertoast package for letting the users know what is up with their email.

dev_dependencies: email_validator: ^2.0.1 fluttertoast: ^8.0.8

3. Make a new dart file, import the Email validator package and the Flutter Toast package and create a stful widget

import 'package:email_validator/email_validator.dart'; import ‘package:fluttertoast/fluttertoast.dart’;

4. Add the required variables:

final _emailController = TextEditingController();bool _isValid = false;

5. Make a TextFormField. Place the _emailController variable that we made in place of the controller property.Format it a little.

return Scaffold( backgroundColor: Colors.blue, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: EdgeInsets.only(left: 8.0, right: 8), child: TextFormField( controller: _emailController, keyboardType: TextInputType.emailAddress, decoration: const InputDecoration( focusedBorder: OutlineInputBorder( borderSide: BorderSide( width: 2.0, color: Colors.white, ), ), enabledBorder: OutlineInputBorder( borderSide: BorderSide( width: 2.0, color: Colors.white, ), ), prefixIcon: Icon( Icons.email, color: Colors.blue, ), filled: true, fillColor: Colors.white, hintText: "email", hintStyle: TextStyle( color: Colors.blue, fontSize: 17.0, ), ), textInputAction: TextInputAction.next, ), ),

6. Create a submit button for validation and toast message.

Logic for Submit Button

We make a new variable named _isValid that checks if the the email is valid or not by using the Email Validator package’s validate function.Then, we use if to check to see that if email is valid, we return a toast with message “Valid Email”. By using Else if we check whether the email TextFormField is empty, then we return a toast with message “Enter Email”.Now, by using Else there’s only one possibility that the email is not valid. So we return another toast with the message “Enter a Valid Email”.

FlatButton( child: Text( 'Validate', style: TextStyle(color: Colors.white), ), color: Colors.blue, onPressed: () { _isValid = EmailValidator.validate(_emailController.text); if (_isValid) { Fluttertoast.showToast( msg: "Valid Email", toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.TOP, timeInSecForIosWeb: 1, fontSize: 16.0); } else if (_emailController.text.isEmpty) { Fluttertoast.showToast( msg: 'Enter Email', toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.TOP, timeInSecForIosWeb: 1, fontSize: 16.0); } else { Fluttertoast.showToast( msg: 'Enter a Valid Email', toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.TOP, timeInSecForIosWeb: 1, fontSize: 16.0); } },)